<template>
  <div class="set-number">
    <a-spin :spinning="loading">
      <XlsxTable :columns="xlsxColumn" :colWidths="colWidths" :minRows="formState.length" :showButton="false" :table-data="formState" :config="{ height: '500px', ...config }"></XlsxTable>
    </a-spin>
    <div class="operation-btn-wrapper">
      <a-button v-debounce @click="submitHandle" :loading="loading" type="primary">保 存</a-button>
      <a-button @click="cancelHandle">取 消</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { toRefs, watch } from "vue";
import { xlsxColumn, colWidths } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
const props = withDefaults(
  defineProps<{
    visible: boolean;
    passData: CustomerServiceWaybill.ListRows;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", visible: boolean): void;
  (e: "submit"): void;
}>();

const { visible, passData } = toRefs(props);
const { formState, loading, config } = InitHook();
const { submitHandle, cancelHandle } = OperationHook({ formState, emit, loading });
const init = () => {
  formState.value =
    passData.value.preOrderShipmentBox.map((t: any) => {
      return { ...t, isMasterNum: t.isMasterNum === 1 ? true : false };
    }) || [];
};

watch(
  () => visible.value,
  (v: boolean) => {
    if (v) {
      init();
    } else {
      formState.value = [];
    }
  }
);
init();
</script>
<style lang="stylus" scoped>
.set-number{
    background-color: #fff;
    padding: 0 12px 62px 12px;
    .operation-btn-wrapper{
        position: absolute;
        z-index: 9999;
        width: 100%;
        background-color: #fff;
        text-align: center;
        left: 0;
        right: 0;
        padding: 12px 0;
        bottom: 0;
        :deep(.ant-btn){
            margin-right: 16px;
        }
    }
}
</style>
Z
